<template>
  <el-dialog :visible.sync="warningVisible" @close="destroyElement"
             :width="width"
             :show-close="showClose"
             :close-on-click-modal="showClose"
             :close-on-press-escape="showClose"
             class="member-detail"
  >
    <div class="member-detail__status-title" slot="title">
      代理账户：
      <svg-icon icon-class="user" :type="fetchData.isOnline === 1 ? 'primary' : 'info'"></svg-icon>
      {{info.username}}
      <div :class="fetchData.isActive ? 'online-primary' : 'online-danger'">{{fetchData.isActive === 1 ? '活跃' : '待活跃'}}</div>
    </div>
    <div class="member-detail__status-info">
      <!--<div class="member-detail__status-betting">公司输赢：<money-text style="display: inline-block" :negate="true" :value="_result(fetchData, 'amount.betWinAmount.value')"></money-text></div>-->
      <div class="member-detail__status-betting">公司输赢：<money-text style="display: inline-block" :negate="true" :value="info.row.win"></money-text></div>
      <div class="member-detail__status-time" v-if="info.filters!=undefined">数据汇总时间：{{info.filters.date[0] | toDate}}- {{info.filters.date[1] | toDate}}</div>
      <div class="member-detail__status-time" v-else>数据汇总时间：{{new Date().setDate(1) | toDate}}- {{new Date() | toDate}}</div>
    </div>
    <table
        class="member-detail__table el-table el-table--fit el-table--border el-table--border-radius el-table--enable-row-hover">
      <tr>
        <td>代理层级</td>
        <td>{{info.row.level | toConverter('PROXY_LEVEL')}}</td>
        <td>上分总额</td>
        <td>{{fetchData.amount | currency}}</td>
      </tr>
      <tr>
        <td>所属上级</td>
        <td>{{info.row.parent_name}}</td>
        <td>会员上分</td>
        <td>{{fetchData.payOutAmount | currency}}</td>
      </tr>
      <tr>
        <td>下级会员</td>
        <td>{{info.row.users}}</td>
        <td>代理上分</td>
        <td>{{fetchData.proxyCreditedAmount | currency}}</td>
      </tr>
      <tr>
        <td>红利总额</td>
        <td>{{info.row.bonus | currency}}</td>
        <td>上分余额</td>
        <td>{{fetchData.validAllocateAmount | currency}}</td>
      </tr>
      <tr>
        <td>返水总额</td>
        <td>{{info.row.rebate | currency}}</td>
        <td>注册时间</td>
        <td>{{info.row.register_date | toTime}}</td>
      </tr>
    </table>

    <div class="member-detail__footer" v-if="isCreditUpAgent">
      <el-button class="member-detail__button" @click="openCreditUp" type="primary">上分</el-button>
    </div>
    <!--<el-warning style="margin-top: 10px" align="top">-->
      <!--活跃会员：充值/提现/投注/参与活动，达到其中一个条件即为活跃会员<br/>-->
      <!--当月有效会员：月有效投注额大于1000元，月有效投注单数大于5单<br/>-->
    <!--</el-warning>-->
  </el-dialog>
</template>

<script type="text/jsx">

  import {secondLevelApi as getApi} from '@/services/api/low-level';

  import getCommand from '@/mixins/get-command';
  export default {
    name: 'agent-detail',

    mixins: [getCommand],

    data() {
      return {
        warningVisible: true,
        info: {},
        width: consts.DIALOG_SIZE_LARGE,
        showClose: true,
        closed: false,
        fetchData: {
          amount: {},
          regInfo: {}
        },
        callback: _.noop,
        effectShow: true,
      };
    },

    watch: {
      closed(newVal) {
        if (newVal) {
          this.warningVisible = false;
        }
      }
    },

    methods: {
      close() {
        this.closed = true;
        if (typeof this.onClose === 'function') {
          this.onClose(this);
        }
      },
      openCreditUp() {
        this.$creditUpAgent({
          info: this.info,
          callback: action => {
            if (action === 'success') {
              this.callback('success');
            }
          }
        });
        this.close();
      },
      destroyElement() {
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      },
      changeEffectShow(effectStatus) {
        if (effectStatus === 0){
          this.effectShow = false;
        }else {
          this.effectShow = true;
        }
      },
    },

    computed: {
      ...mapGetters([
        'isCreditUpAgent'
      ]),
      ...mapState({
        creditStatus: state => state.creditStatus
      }),
    },

    mounted() {
      this.bindGet(getApi, 'fetchData', {
        sendingData: {
          userId: this.info.id
        }
      });
      this.getAll();
    },

  };
</script>

<style lang="scss" scoped>
  @include b(member-detail) {
    @include e(username-column) {
      display: flex;
      align-items: center;
      justify-content: center;
      .svg-icon {
        margin-right: 6px;
      }
    }
    @include e(status-title) {
      height: 60px;
      font-size: 28px;
      font-weight: bold;
      line-height: 60px;
      .svg-icon {
        width: 17px;
        height: 21px;
        margin-right: 10px;
      }
      .online-primary {
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #ffffff;
        font-size: 12px;
        background: $--color-primary;
        display: inline-block;
        border-radius: 5px;
        margin-left: 10px;
      }
      .online-danger {
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #ffffff;
        font-size: 12px;
        background: #999999;
        display: inline-block;
        border-radius: 5px;
        margin-left: 10px;
      }
    }
    @include e(status-info) {
      font-size: 14px;
      font-weight: bold;
      height: 40px;
      line-height: 40px;
      @include e(status-betting) {
        float: left;
      }
      @include e(status-time) {
        float: right;
      }
    }

    @include e(table) {
      margin-bottom: 60px;
      td {
        width: 25%;
        text-align: center;

        &:nth-of-type(2n + 1) {
          background-color: #fbfbfb;
        }
      }

      &:before, &:after {
        display: none;
      }
      @include e(table-item) {
        color: #000000;
        text-align: left;
        font-weight: 400;
        padding-left: 10px;
        span {
          color: #d20d25;
        }
      }
    }

    @include e(domain) {
      @include utils-ellipsis();
      width: 200px;
    }

    @include e(footer) {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    @include e(button) {
      width: 276px;
    }
  }
</style>
